<#import "/spring.ftl" as s>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>报单部门管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <#include '../include/baselink.ftl'>
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/css/jquery.pagination.css'/>">
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/plugins/daterange/daterangepicker.css'/>">
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/plugins/summernote/summernote.css'/>">
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/plugins/tagmanager/tagmanager.css'/>">
</head>
<body>
<div id="main">
    <#include '../include/header.ftl'>
    <#include '../include/sidebar.ftl'>

    <section id="content_wrapper">
        <section id="content" class="table-layout animated fadeIn">
            <div class="tray tray-center">
                <!-- dashboard tiles -->
                <div class="panel">
                    <div class="panel-heading">
                        <i class="fa fa-table"></i> 人员列表
                    </div>
                    <div class="panel-body">
                        <div class="panel">
                            <div class="well well-sm mn">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-addon btn btn-default">员工编号:</div>
                                            <input type="text" class="form-control input-sm" placeholder="请输入员工编号"
                                                   v-model="searchInfo.staffCode">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-addon btn btn-default">员工姓名:</div>
                                            <input type="text" class="form-control input-sm" placeholder="请输入员工姓名"
                                                   v-model="searchInfo.staffName">
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <a  data-target="#addBusinessDeptModal"
                                           class="btn btn-info btn-sm"
                                           data-toggle="modal">添加报单部门
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered table-hover table-condensed">
                                <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>员工编号</th>
                                    <th>员工姓名</th>
                                    <th>报单部门ID</th>
                                    <th>报单部门名称</th>
                                    <th>最后修改人</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <template>
                                    <tr v-for="item in staffExtList">
                                        <td>{{item.id}}</td>
                                        <td>{{item.staffCode}}</td>
                                        <td>{{item.staffName}}</td>
                                        <td>{{item.businessDeptId}}</td>
                                        <td>{{item.businessDeptName}}</td>
                                        <td>{{item.modifiedBy}}</td>
                                        <td><a data-target="#updateBusinessDeptModal"
                                               data-toggle="modal" @click="updateCode(item)">修改报单部门</a></td>
                                    </tr>
                                    <tr>
                                        <td colspan="10" v-if="staffExtList.length == 0" class="text-center">
                                            暂无数据!
                                        </td>
                                    </tr>
                                </template>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="10">
                                        <div class="table-responsive">
                                            <div id="pageMenu"></div>
                                        </div>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <#include 'addBusinessDeptModal.ftl'/>
        <#include 'updateBusinessDeptModal.ftl'/>
    </section>
</div>
</body>
<#include '../include/footer_js.ftl'/>
<script src="<@s.url '/assets/js/jquery.pagination.min.js'/>"></script>
<script src="<@s.url '/assets/plugins/daterange/moment.js'/>"></script>
<script src="<@s.url '/assets/plugins/bs-confirmation/bootstrap-confirmation.js'/>"></script>
<script src="<@s.url '/assets/plugins/daterange/daterangepicker.js'/>"></script>
<script>
    var app = new Vue({
        el: '#main',
        data: {
            staffExtList: [],
            searchInfo: {
                staffCode: '',
                staffName: '',
                businessDeptName: '',
                page: 1,
                pageSize: 20,
            },
            staffExt: {
                businessDeptId: ""
            },
            saveInfo: {
                staffCode: '',
                staffName: undefined,
                staffMobile: '',
                businessDeptName: '',
                businessDeptId:''
            },
            amibaStaffList: [],
            staff:{},
        },
        created: function () {
            this.query();
            this.findAmibaList();
        },
        mounted: function () {

        },
        watch: {
            "searchInfo.page": function () {
                this.query();
            },
            "searchInfo.staffName": function () {
                this.search();
            },
            "searchInfo.staffCode": function () {
                this.search();
            },
            "saveInfo.staffMobile": function () {
                if(this.saveInfo.staffMobile == undefined  ||  this.saveInfo.staffMobile == '' || this.saveInfo.staffMobile.length != 11){
                    return
                }
                this.findStaff();
            }
        },
        methods: {
            search: function () {
                this.searchInfo.page = 1;
                $('#pageMenu').page('destroy');//销毁分页
                this.query();
            },
            query: function () {
                let url = contentPath + '/api/view/staff/ext/list';
                this.$http.post(url, this.searchInfo).then(function (response) {
                    this.staffExtList = response.data.data.list;
                    let temp = this;
                    $("#pageMenu").page({
                        total: response.data.data.total,
                        pageSize: response.data.data.pageSize,
                        firstBtnText: '首页',
                        lastBtnText: '尾页',
                        prevBtnText: '上一页',
                        nextBtnText: '下一页',
                        showInfo: true,
                        showJump: true,
                        jumpBtnText: '跳转',
                        infoFormat: '{start} ~ {end}条，共{total}条'
                    }, response.data.data.page).on("pageClicked", function (event, pageIndex) {
                        temp.searchInfo.page = pageIndex + 1;
                    }).on('jumpClicked', function (event, pageIndex) {
                        temp.searchInfo.page = pageIndex + 1;
                    });
                }, function (error) {
                    swal(error.body.msg);
                });
            },
            findAmibaList: function () {
                let url = contentPath + '/api/view/amiba/list/' + 'XIAO_SHOU';
                this.$http.get(url).then(function (response) {
                    this.amibaStaffList = response.data.data;
                }, function (error) {
                    toastr.error(error.body.msg);
                });
            },
            updateBusinessDept: function () {
                this.staffExt.businessDeptName = $("#updateBusinessDeptSelect option:selected").text();
                this.staffExt.businessDeptId = $("#updateBusinessDeptSelect option:selected").val();
                console.log(this.staffExt);
                let url = contentPath + '/api/view/staff/ext/updateBusinessDept';
                this.$http.post(url, this.staffExt).then(function (response) {
                    $("#updateBusinessDeptModal").modal('hide');
                    this.query();
                    toastr.success("操作成功！");
                }, function (error) {
                    toastr.error(error.body.msg);
                });
            },
            addBusinessDept() {
                this.saveInfo.businessDeptName = $("#addBusinessDeptSelect option:selected").text();
                this.saveInfo.businessDeptId = $("#addBusinessDeptSelect option:selected").val();
                console.log(this.saveInfo);
                let url = contentPath + '/api/view/staff/ext/updateBusinessDept';
                this.$http.post(url, this.saveInfo).then(function (response) {
                    $("#addBusinessDeptModal").modal('hide');
                    this.query()
                    toastr.success("操作成功！");
                }, function (error) {
                    toastr.error(error.body.msg);
                });
            },
            findStaff() {
                let url = contentPath + '/api/view/amiba/staff/list?staffMobile=' + this.saveInfo.staffMobile;
                console.log(this.saveInfo.staffName);
                this.$http.get(url).then(function (response) {
                    this.staff = response.data.data;
                    if(!this.staff){
                        toastr.error("员工不存在!");
                        return;
                    }
                    this.saveInfo.staffCode =  this.staff.code;
                    this.saveInfo.staffMobile =  this.staff.mobile;
                    this.saveInfo.staffName =  this.staff.trueName;
                }, function (error) {
                    toastr.error(error.body.msg);
                });
            },
            updateCode(staff) {
                this.staffExt.staffCode = staff.staffCode
                this.staffExt.staffName = staff.staffName
                this.staffExt.businessDeptId = staff.businessDeptId
            }
        }
    });
</script>
</body>
</html>